<template>
  <div class="box">
    <vue3-seamless-scroll :hover="true" :hover-stop="true" :list="arrList" :step="0" class="seamless-warp" :copyNum="0">
      <SliderGroup
        :list="arrList"
        titlePosition="up"
        :titleStyle="{ height: '20px', lineHeight: '20px' }"
        :valueStyle="{ width: 'auto' }"
        valuePosition="up"
        :disabled="true"
        itemMaring="0 auto"
      />
    </vue3-seamless-scroll>
  </div>
</template>
<script setup>
import SliderGroup from '@/components/SliderGroup'
const arrList = ref([]);
const tableList = ref([]);
tableList.value = [
  { province: '攀枝花市', riskArea: '479', riskProportion: '4', riskGrade: '0' },

  { province: '成都市', riskArea: '29773', riskProportion: '19', riskGrade: '0' },

  { province: '泸州市', riskArea: '16992', riskProportion: '9', riskGrade: '0' },

  { province: '绵阳市', riskArea: '1309', riskProportion: '8', riskGrade: '0' },
];
arrList.value = tableList.value.map((item) => {
  return {
    title: item.province,
    num: item.riskArea,
    value: Number(item.riskProportion),
    valueInfo: `${item.riskArea}（${item.riskProportion}%）`,
  };
});
</script>
<style lang="scss" scoped>
.box{
    height: 400px;
}
.seamless-warp {
	margin-top: 15px;
  height: calc(100% - 50px);
  overflow-y: auto;

  :deep(.slider-group-item) {

    .el-slider {
      width: 100%;
      margin: 0;

      .el-slider__runway {
        height: 10px;
        background: #000000;
				border:none;
        .el-slider__bar {
          height: 10px;
					background: linear-gradient(90deg, #0775FE 0%, #46FFFF 100%);
					border-radius: 5px 5px 5px 5px;
          background-position: center;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          margin-left: 0;
          margin-right: 0;
        }

        .el-slider__button-wrapper {
          color: red;
          margin-left: -13px;

          .el-slider__button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-position: center;
            width: 13px;
						height: 13px;
						background: #E9FFFF;
						box-shadow: 0px 0px 14px 1px #46FFFF;
						border-radius: 13px;
						border: 2px solid #46FFFF;
          }
        }
      }
    }
  }
}</style>
